<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t("项目时长统计") }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('工作日期')">
        <el-date-picker
          v-model="queryParams.date"
          type="daterange"
          range-separator="-"
          format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-form-item :label="$t('部门')">
          <DeptSelect
            v-model="queryParams.dept"
            style="width: 220px"
            :placeholder="$t('部门')"
            filterable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="queryHandle"
          >{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
            $t("重置")
          }}</el-button>
          <el-button
            v-hasPermi="['anxin:weekly:export']"
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >{{ $t("导出") }}</el-button>
        </el-form-item>
      </el-form-item></el-form>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">

      </el-col>
    </el-row> -->
    <p class="head_unit">单位：天</p>
    <el-table

      v-loading="loading"
      :data="anxinWeeklyList"
      border
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column
        v-for="(col,index) in columns"
        :key="col.prop+index"
        :prop="col.prop"
        :label="col.label"
        :fixed="col.prop === 'dealName'"
        :width="(col.prop == 'dealName' || col.prop == 'sum')? '180' : col.length>7? '180': '' "
      >
        <template slot-scope="scope">
          <span v-if="col.prop === 'dealName'">
            {{ scope.row.dealName }}
          </span>
          <span v-else-if="col.prop === 'sum'">
            <!-- {{ scope.row }} -->
            {{ day(scope.row.sum) }}
          </span>
          <span v-else>
            <!-- {{ scope.row }} -->
            {{ day(scope.row[col.prop]) }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改周报对话框 -->
    <el-dialog
      v-if="formOpen"
      :title="$t('周报')"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <anxinWeeklyForm ref="anxinWeeklyForm" />
    </el-dialog>
  </div>
</template>

<script>
import { anxinDealDurationList } from '@/api/anxin/weekly/anxinWeekly'
import { downLoadExcel } from '@/utils/excelDownload'
import anxinWeeklyForm from './anxinWeeklyForm.vue'
export default {
  components: {
        anxinWeeklyForm
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 周报表格数据
          anxinWeeklyList: [],
          // 是否显示弹出层
          formOpen: false,
        // 是否驻场字典
        siteOptions: [],
         columns: [],
          // 查询参数
          queryParams: {
              date: undefined,
              dept: ''
          },
          // 记录日期范围
          dateRange: [],
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
          title: ''
      }
  },
  computed: {

  },
  created() {
      this.queryParams.date = [this.getCurrentMonthFirst(), this.getCurrentMonthLast()]
      // this.getList()
      this.anxinWeeklyList = []
      this.loading = false
  },
  methods: {
    /** 查询周报列表 */
    getList() {
        this.loading = true
        let start = ''
        let end = ''
        const deptId = this.queryParams.dept
        if (this.queryParams.date) {
              console.log(this.queryParams.date)
              start = this.setTime(this.queryParams.date[0])
              end = this.setTime(this.queryParams.date[1])
        }
        anxinDealDurationList(start, end, deptId).then(res => {
           this.anxinWeeklyList = res.data.data
           this.columns = res.data.columns
           this.loading = false
        }).catch(() => {
             this.loading = false
        })
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryParams = {
              date: undefined,
              dept: '',
              user: '',
              yearWeek: '',
              pageNum: 1,
              pageSize: 10
          }
           this.queryParams.date = [this.getCurrentMonthFirst(), this.getCurrentMonthLast()]
          this.getList()
    },

    /** 导出按钮操作 */
    exportHandle() {
        let start = ''
        let end = ''
        const deptId = this.queryParams.dept
        if (this.queryParams.date) {
              start = this.setTime(this.queryParams.date[0])
              end = this.setTime(this.queryParams.date[1])
        }
        const param = {
          start,
          end,
          deptId
        }
        this.$confirm('确定要导出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           downLoadExcel('/weekly/anxinWeekly/dealDurationListExport', param)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
     /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        const data = {
          id: row.id,
          yearWeek: row.yearWeek,
          createBy: row.deptId
        }
        this.$nextTick(() => {
           this.$refs.anxinWeeklyForm.isHideInit('1')
            // 调用form页面的 init 方法初始化数据
            this.$refs.anxinWeeklyForm.init(data)
        })
    },
    // 导出弹出层关闭
    exportCancel() {
      this.exportOpen = false
      this.dateRange = []
      this.resetForm('exportQueryParams')
    },
      getCurrentMonthFirst() {
        var date = new Date()
        date.setDate(1)
        var month = parseInt(date.getMonth() + 1)
        var day = date.getDate()
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        return date.getFullYear() + '-' + month + '-' + day
    },
      getCurrentMonthLast() {
        var date = new Date()
        var currentMonth = date.getMonth()
        var nextMonth = ++currentMonth
        var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
        var oneDay = 1000 * 60 * 60 * 24
        var lastTime = new Date(nextMonthFirstDay - oneDay)
        var month = parseInt(lastTime.getMonth() + 1)
        var day = lastTime.getDate()
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        return date.getFullYear() + '-' + month + '-' + day
    },

  setTime(time) {
    const mytime = new Date(time)
    return (
        mytime.getFullYear() + '-' + (mytime.getMonth() + 1) + '-' + mytime.getDate()
      )
    },
    day(data) {
      if (data) {
        return data
      }
      return ''
    },
     getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        })

        return sums
      }
  }
}
</script>
<style scoped lang="scss">
/* 修改部门 用户 select 宽度 */
/deep/.el-input {
  width: 100% !important  ;
}
/deep/.list-table .el-form--inline .el-form-item__content .el-input {
  width: 200px !important  ;
}
.head_unit{
  color: red;
  font-size: 20px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  margin: 4px 2px;
  font-weight: 500;
}
 /deep/.el-table {
      overflow-x: auto;
    }
    /deep/.el-table__header-wrapper,
    /deep/.el-table__body-wrapper,
    /deep/.el-table__footer-wrapper {
      overflow: visible;
    }
    /deep/.el-table::after {
      position: relative;
    }
    /deep/.el-table--scrollable-x .el-table__body-wrapper {
      overflow: visible;
    }
</style>
